<template>
	<view>
		<view class="container">
			<view class="content">
				<view class="title">分享业务海报，赚钱获得佣金</view>
				<view class="content-text">海报自动生成并带有你的专属二维码</view>
				<view class="btn" @click="generatePoster">分享推广海报</view>
			</view>

			<!-- 业绩 -->
			<view class="results">
				<view class="results-head flex-space">
					<text class="results-title">我的业绩</text>
					<navigator class="reward-rules-text" url="/pages/reward-rules-registration/index">奖励规则</navigator>
				</view>
				<!-- 列表 -->
				<view class="list">
					<view class="flex-align total-revenue">
						<view class="type-item">
							<text class="bold-text">{{detail.number}}</text>
							<text class="type-text">有效线索</text>
						</view>
						<view class="type-item">
							<text class="bold-text">{{detail.ratio}}</text>
							<text class="type-text">线索转化率</text>
						</view>
						<view class="type-item">
							<text class="bold-text"> <text class="symbol">￥</text>{{detail.bonus}}</text>
							<text class="type-text">奖金收入</text>
						</view>
					</view>
					<view class="list-content">
						<view class="list-content-title flex-space">
							<view class="title-item">用户ID</view>
							<view class="title-item">业绩达成</view>
							<view class="title-item">奖励情况</view>
						</view>
						<scroll-view scroll-y="true" class="subsidiary" :lower-threshold="100"
							@scrolltolower="bindscrolltolower">
							<view class="performance-subsidiary flex-space" v-for="(item,index) in list" :key="index">
								<view class="subsidiary-item">{{item.name}}</view>
								<view class="subsidiary-item">{{item.isAttain}}</view>
								<view class="subsidiary-item">{{item.close}}</view>
							</view>
							<view v-if="!list.length && isComplete" class="nocontent">
								<image src="/static/image/public/WSJ.png" class="wsjImg"></image>
								<view>暂无数据</view>
							</view>
							<!-- <van-empty v-if="!list.length && isComplete" description="暂无数据" /> -->
							<no-data v-if="list.length && isComplete"></no-data>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				isComplete: false,
				list: [],
				pageNo: 1,
				detail: {},
				poster: [], //生成的海报路径
			};
		},
		onLoad: function(options) {
			this.getList();
		},
		methods: {
			//生成海报
			generatePoster() {
				uni.navigateTo({
					url: '/pages/proImage/proImage',
				})
			},
			//触底加载更对
			bindscrolltolower() {
				!this.isComplete && !this.isLoading && this.getList();
			},
			//获取业绩
			getList() {
				this.isLoading = true;
				this.$api.getExtensionShow({
					pageNo: this.pageNo
				}).then(res => {
					console.log(res)
					this.detail = res.data.data;
					this.isLoading = false;
					this.isComplete = !res.data.data.extensionDataVo.length;
					this.list = this.list.concat(res.data.data.extensionDataVo.records);

				})
			},

		},
	}
</script>

<style lang="less">
	.container {
		padding: 30rpx;
	}

	.content {
		width: 100%;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		padding-top: 58rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.btn {
		width: 550rpx;
		height: 80rpx;
		background: #EEEEFE;
		border: 2rpx solid #585CF7;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #585CF7;
		line-height: 80rpx;
		margin: 44rpx auto 0;
	}

	.content-text {
		margin-top: 28rpx;
		font-size: 28rpx;
		color: #333333;
	}

	/* 业绩 */
	.results {
		margin-bottom: 20rpx;
	}

	.results-head {
		height: 80rpx;
	}

	.results-title {
		font-size: 32rpx;
		font-weight: 800;
		color: #333333;
	}

	.reward-rules-text {
		font-size: 22rpx;
		color: #999999;
	}

	.list {
		width: 100%;
		height: 720rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 26rpx 20rpx;
	}

	.total-revenue {
		height: 162rpx;
	}

	.type-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bold-text {
		display: inline-block;
		font-size: 46rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FC4073;
	}

	.type-text {
		font-size: 26rpx;
		color: #333333;
	}

	.symbol {
		font-size: 26rpx;
		font-weight: normal;
	}

	.list-content {
		width: 100%;
		height: 510rpx;
		background: #F8F8F8;
	}

	.title-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
		line-height: 80rpx;
	}

	.subsidiary {
		height: 430rpx;
		overflow: auto;
		width: 100%;
	}

	.performance-subsidiary {
		height: 60rpx;
	}

	.subsidiary-item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #333333;
	}

	// .van-empty {
	// 	padding: 0 !important;
	// }
	.nocontent {
		padding-top: 0;
	}
</style>
